<!-- 
    <template>
    <el-table v-drag v-bind="$attrs">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="2120">
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
        </el-table-column>
    </el-table>
</template>
-->
<script>
export default {
  name: 'GTable',
  props: {
    columns: {
      type: Array,
      required: true,
    },
    conf: {
      type: Object,
      default: () => ({}), // 默认返回空对象
    },
    usePager: {
      type: Boolean,
    },
    pager: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  render() {
    const { usePager, pager } = this
    return (
      <div>
        {this.renderTable()}
        {/*根据判断输出分页*/}
        {usePager && this.renderPagination(pager)}
      </div>
    )
  },
  methods: {
    renderPagination(pager) {
      return (
        <el-pagination
          onSize-change={(e) => this.$emit('size-change', e)}
          onCurrent-change={(e) => this.$emit('current-change', e)}
          hide-on-single-page
          currentPage={pager.currentPage}
          pageSizes={pager.pageSizes}
          pageSize={pager.pageSize}
          layout={pager.layout}
          total={pager.total}
        />
      )
    },
    //渲染表格
    renderTable() {
      const {
        // 原名:别名
        $attrs: attrs,
        $scopedSlots: tableScopedSlots,
        columns,
        conf: { multipleSelection, index },
        $parent: { showLoading },
      } = this
      const directives = [
        {
          name: 'drag',
        }, // v-loading
        {
          name: 'loading',
          value: showLoading,
        },
      ]
      return (
        <el-table attrs={attrs} {...{ directives }}>
          {/* 1.动态输出index */}
          {index && <el-table-column label="序号" type="index" width="55" />}
          {/* 2.动态输出多选 */}
          {multipleSelection && <el-table-column type="selection" width="55" />}
          {/* 3.遍历 */}
          {/* 3.1.输出动态列 */}
          {columns &&
            columns.map((col) => {
              /* return (
                <el-table-column
                  prop={col.prop}
                  label={col.label}
                  width={col.width}
                />
              ) */
              return <GColumn item={col} scopedSlots={tableScopedSlots} />
            })}
        </el-table>
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.el-pagination {
  float: right;
  padding: 10px 0;
}
.el-table {
  user-select: none;
}
</style>
